<template>
  <div>不需要嵌套</div>
  <div class="waper">
    <div class="inner">
      <div>{{a}}</div>
      <div>{{counter}}</div>
    </div>

    <div @click="clickFn">
      setup设置点击事件
    </div>

    <div>
      {{refObj.test1}}
    </div>
  </div>
</template>

<script>
import { ref,toRefs,onMounted,watch   } from 'vue'
export default {
  name: 'App',
  components: {
  },
  data(){
    return {
      a: 100
    }
  },
  mounted(){
  },
  setup(){
    let counter = ref(0);
    counter.value++;
    const fn = ()=>{
      console.log("fn running");
    }
    const clickFn = ()=>{
      alert("被点击了");
    }
    onMounted(()=>{
      fn(9)
    });
    watch(counter,(value, oldValue) => {
      console.log(value,oldValue);
    })
    const testObj = {
      test1 : 'ttt',
      test2 : 'test2',
      test3 : 'test3'
    }
    const refObj = toRefs(testObj);
    return {
      counter,
      clickFn,
      refObj
    }
  },
  methods:{
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.waper{
  .inner{
    color: red;
  }
}
</style>
